<template>
    <div>
        <iframe :id="id" class="news_content" frameborder="no" scrolling="no"></iframe>
    </div>
</template>

<script lang="ts">
export default {
    name: "AutoIframe",
    props: {
        content: {
            type: String,
            default: ""
        }
    },
    data(){
        return{
            id: "auto-iframe-" + Date.now()
        }
    },
    mounted(){
        var that = this;
        (function() {
            // 文章用iframe显示，为了让文章的高度足够长采用了如下的代码
            var temp = window.setInterval(function (){
                var iframe = document.getElementById(that.id);
                if(!iframe) {
                    clearInterval(temp);
                }else {
                    var bHeight = iframe.contentWindow.document.body.scrollHeight;
                    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                    var height = Math.max(bHeight, dHeight);
                    iframe.height = height;
                }
            }, 500);
        })();
    },
    watch: {
        content(value) {
            document.getElementById(this.id).contentWindow.document.close();
            document.getElementById(this.id).contentWindow.document.write(value);
        }
    }
};
</script>

<style scoped>
.news_content
{
    width:100%;
}
</style>
